<template>
  <div class="test">
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="block">
        <el-cascader
          v-model="cascaderData"
          :options="options"
          :props="{ multiple: true }"
          collapse-tags
          clearable
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-button @click="dialogVisible = true">dianwo</el-button>
  </div>
</template>

<script>
import { getAllWarehouse, getAreaTree } from '@/api/owner'

export default {
  data() {
    return {
      dialogVisible: false,
      options: [],
      cascaderData: []
    }
  },

  async created() {
    const { data } = await getAllWarehouse()
    const arr = []
    for (const item of data) {
      let list = {}
      const { data } = await getAreaTree({ 仓库id: item.id })
      list = { ...item, children: data, label: item.name }
      arr.push(list)
    }
    arr.forEach(item => this.changeDisable(item.children))
    this.options = arr
  },
  methods: {
    changeDisable(arr) {
      arr.forEach(element => {
        if (element.children) {
          this.changeDisable(element.children)
        } else {
          element.disabled = element.ownerId !== null
        }
      })
    },
    handleClose() {}
  }
}
</script>

<style>
</style>
